/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

.component-css-vars-steps() {
  // 节点圆圈尺寸
  --ti-steps-circle-width-height: var(--ti-common-size-5x, 20px);
  // 序号字号
  --ti-steps-number-font-size: var(--ti-common-font-size-base, 12px);
  // 节点内容字号
  --ti-steps-font-size-base: var(--ti-common-font-size-base, 12px);
  // 节点内容悬浮字号
  --ti-steps-font-size-hover: var(--ti-common-font-weight-4, normal);
  // 节点文本色
  --ti-steps-text-color: var(--ti-common-color-text-primary, #252b3a);
  // 节点内容悬浮背景色
  --ti-steps-bg-color-hover: var(--ti-common-color-bg-white-normal, #fff);
  // 节点内容悬浮边框色
  --ti-steps-border-color-hover: var(--ti-common-color-line-active, #5e7ce0);
  // 节点内容悬浮字体色
  --ti-steps-text-color-hover: var(--ti-common-color-primary-normal, #5e7ce0);
  // 序号圆圈大小
  --ti-steps-icon-size: var(--ti-common-size-5x, 20px);
  // 序号悬浮字体色
  --ti-steps-icon-hover-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
  // 步骤条字号(hide)
  --ti-steps-font-size-7: var(--ti-common-font-size-7, 36px);
  // 节点间横线厚度
  --ti-steps-line-height: var(--ti-common-border-weight-normal, 1px);
  // 节点间横线水平边距
  --ti-steps-line-margin-horizontal: var(--ti-common-space-2x, 8px);
  // 节点间横线最小宽度
  --ti-steps-line-min-width: var(--ti-common-space-4x, 16px);
  // 节点内容左边距
  --ti-steps-text-margin-left: var(--ti-common-space-base, 4px);
  // 节点间横线默认长度
  --ti-steps-line-width: var(--ti-common-size-16x, 64px);
  // 节点文本内容最大宽度
  --ti-steps-content-max-width: calc(var(--ti-common-space-10, 10px) * 25);
  // 节点文本内容上边距
  --ti-steps-content-margin-top: var(--ti-common-space-6, 6px);
  // 底部分割线厚度
  --ti-steps-bottom-divider-height: var(--ti-common-space-1, 1px);
  // 底部分割线与主体间距
  --ti-steps-bottom-divider-margin-top: var(--ti-common-space-4x, 16px);
  // 底部分割线的颜色
  --ti-steps-bottom-divider-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
  // 描述信息字号
  --ti-steps-description-font-size: var(--ti-common-font-size-base, 12px);
  // 描述信息字体色
  --ti-steps-description-text-color: var(--ti-common-color-text-secondary, #575d6c);
  // 描述信息最小宽度
  --ti-steps-description-min-width: calc(var(--ti-common-space-10, 10px) * 10);
  // 垂直单链型描述上边距
  --ti-steps-vertical-description-margin-top: var(--ti-common-space-2x);

  // 活跃节点背景色
  --ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
  // 活跃节点悬浮背景色
  --ti-steps-done-active-bg-color-hover: var(--ti-common-color-primary-hover, #7693f5);
  // 活跃节点边框色
  --ti-steps-advanced-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
  // 活跃节点序号图标色
  --ti-steps-line-active-icon-color: var(--ti-common-color-icon-white, #fff);
  // 活跃节点字重
  --ti-steps-active-font-weight: var(--ti-common-font-weight-4, normal);
  // 活跃节点内容字体色
  --ti-steps-advanced-active-text-color: var(--ti-common-color-primary-normal, #5e7ce0);

  // 已完成节点文本色
  --ti-steps-done-text-color: var(--ti-common-color-text-primary, #252b3a);
  // 已完成节点线条色
  --ti-steps-line-active-bg-color: var(--ti-common-color-line-active, #5e7ce0);
  // 已完成节点边框色
  --ti-steps-done-active-border-color: var(--ti-common-color-line-active, #5e7ce0);
  // 已完成节点悬浮边框色
  --ti-steps-done-active-border-color-hover: var(--ti-common-color-primary-hover, #7693f5);
  // 已完成节点图标(或文本)色
  --ti-steps-done-icon-color: var(--ti-common-color-icon-active, #5e7ce0);
  // 已完成节点图标大小
  --ti-steps-done-icon-size: var(--ti-common-font-size-1, 14px);
  // 已完成节点背景色
  --ti-steps-done-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);

  // 未完成的线条色
  --ti-steps-line-bg-color: var(--ti-common-color-bg-secondary, #adb0b8);
  // 未完成节点的背景色
  --ti-steps-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
  // 未完成节点序号图标色
  --ti-steps-unselected-icon-color: var(--ti-common-color-icon-normal, #575d6c);
  // 未完成节点序号悬浮图标色
  --ti-steps-unselected-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
  // 未完成节点边框色
  --ti-steps-unselected-border-color: var(--ti-steps-unselected-icon-color);
  // 未完成节点悬浮边框色
  --ti-steps-unselected-hover-border-color: var(--ti-steps-unselected-hover-icon-color);
  // 未完成节点内容文本色
  --ti-steps-timeline-date-time-text-color: var(--ti-common-color-text-primary, #252b3a);

  // 处理中节点边框色
  --ti-steps-doing-border-color: var(--ti-common-color-line-active, #5e7ce0);
  // 处理中节点悬浮边框色
  --ti-steps-doing-border-color-hover: var(--ti-common-color-primary-hover, #7693f5);
  // 处理中节点图标(或文本)色
  --ti-steps-doing-icon-color: var(--ti-common-color-icon-active, #5e7ce0);
  // 处理中节点序号背景色
  --ti-steps-doing-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);

  // 错误节点的背景色
  --ti-steps-error-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
  // 错误节点悬浮背景色
  --ti-steps-error-icon-bg-color-hover: var(--ti-common-color-error-bg, #ffeeed);
  // 错误节点图标色
  --ti-steps-error-icon-color: var(--ti-common-color-error-text, #de504e);
  // 错误节点图标大小
  --ti-steps-error-icon-size: var(--ti-common-font-size-1, 14px);
  // 错误节点边框色
  --ti-steps-error-border-color: var(--ti-common-color-error-border, #f66f6a);
  // 错误节点描述文本色
  --ti-steps-error-text-color: var(--ti-common-color-error-text, #de504e);

  // 禁用节点的背景色
  --ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
  // 禁用节点序号文本色
  --ti-steps-disabled-icon-color: var(--ti-common-color-text-disabled, #adb0b8);
  // 禁用节点边框色
  --ti-steps-disabled-border-color: var(--ti-steps-disabled-icon-color);
  // 禁用节点描述文本色
  --ti-steps-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
  // 禁用节点名称文本色
  --ti-steps-disabled-name-text-color: var(--ti-common-color-text-disabled, #adb0b8);
  // 禁用节点选中背景色
  --ti-steps-disabled-select-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
  // 禁用节点选中序号文本色
  --ti-steps-disabled-select-icon-color: var(--ti-common-color-text-disabled, #adb0b8);

  // mini尺寸序号圆圈大小
  --ti-steps-mini-icon-size: var(--ti-common-font-size-5, 24px);
  // mini尺寸序号字号
  --ti-steps-mini-number-font-size: var(--ti-common-font-size-base, 12px);
  // mini尺寸节点内容字号
  --ti-steps-mini-font-size-base: var(--ti-common-font-size-base, 12px);

  // 向导步骤条边框色
  --ti-steps-advanced-border-color: var(--ti-common-color-line-normal, #adb0b8);
  // 向导步骤条未选中项文本色
  --ti-steps-advanced-text-color: var(--ti-common-color-text-secondary, #575d6c);
  // 向导步骤条行高
  --ti-steps-advanced-line-height: var(--ti-common-size-7x, 28px);
  // 向导步骤条边框圆角
  --ti-steps-advanced-border-radius: calc(var(--ti-common-space-1, 1px) * 3);
  // 向导步骤条未选中项背景色
  --ti-steps-advanced-li-bg-color: var(--ti-common-color-bg-white-normal, #fff);
  // 向导步骤条当前项和计数标记点的文本色
  --ti-steps-advanced-li-text-color: var(--ti-common-color-selected-text-color, #fff);
  // 向导步骤条节点悬浮文本色
  --ti-steps-advanced-li-hover-text-color: var(--ti-common-color-text-secondary, #575d6c);
  // 向导步骤条节点悬浮背景色
  --ti-steps-advanced-li-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
  // 向导步骤条字号
  --ti-steps-advanced-link-font-size: var(--ti-common-font-size-base, 12px);
  // 向导步骤条节点里的图标高度
  --ti-steps-advanced-dot-height: var(--ti-common-size-3x, 12px);
  // 向导步骤条节点里的图标宽度
  --ti-steps-advanced-dot-width: var(--ti-common-size-3x, 12px);
  // 向导步骤条计数标记点背景色
  --ti-steps-advanced-count-bg-color: var(--ti-common-bg-primary, #c7000b);
  // 向导步骤条计数标记点边框圆角
  --ti-steps-advanced-count-border-radius: var(--ti-common-space-10, 10px);
  // 向导步骤条计数标记点字号
  --ti-steps-advanced-count-font-size: var(--ti-common-font-size-base, 12px);
  // 向导步骤条计数标记点高度
  --ti-steps-advanced-count-height: calc(var(--ti-common-space-6, 6px) * 3);
  // 向导步骤条厚度(hide)
  --ti-steps-advanced-border-weight: calc(var(--ti-common-space-base, 4px) * 3.5);
  // 时间线时间字号(hide)
  --ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-base, 12px);
  // 向导步骤条正在处理节点背景色(hide)
  --ti-steps-advanced-dot-doing-bg-color: var(--ti-common-color-warn, #fa9841);
  // 向导步骤条待处理节点背景色(hide)
  --ti-steps-advanced-dot-wait-bg-color: var(--ti-common-color-success-normal, #50d4ab);
  // 向导步骤条已完成节点背景色(hide)
  --ti-steps-advanced-dot-done-bg-color: var(--ti-common-color-success-normal, #50d4ab);
  // 向导步骤条默认背景色
  --ti-steps-advanced-default-bg-color: var(--ti-common-color-bg-normal, #eef0f5);
  // 向导步骤条悬浮背景色
  --ti-steps-advanced-bg-color-hover: #dfe1e6;
  // 向导步骤条已完成节点背景色
  --ti-steps-advanced-done-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa);
  // 向导步骤条已完成节点悬浮背景色
  --ti-steps-advanced-done-bg-color-hover: var(--ti-base-color-brand-3, #beccfa);
  // 向导步骤条进行中节点背景色
  --ti-steps-advanced-doing-bg-color: var(--ti-common-color-bg-light-normal, #e9edfa);
  // 向导步骤条已完成节点悬浮背景色
  --ti-steps-advanced-doing-bg-color-hover: var(--ti-base-color-brand-3, #beccfa);
  // 向导步骤条异常节点背景色
  --ti-steps-advanced-error-bg-color: var(--ti-common-color-error-bg, #ffeeed);
  // 向导步骤条异常节点悬浮背景色
  --ti-steps-advanced-error-bg-color-hover: var(--ti-common-color-error-border-secondary, #ffbcba);
  // 向导步骤条异常节点选中背景色
  --ti-steps-advanced-error-bg-color-selected: #de504e;
  // 向导步骤条异常节点图标色
  --ti-steps-advanced-error-icon-color: var(--ti-common-color-error-text, #de504e);
  // 向导步骤条禁用节点背景色
  --ti-steps-advanced-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f5);
  // 向导步骤条禁用节点悬浮背景色
  --ti-steps-advanced-disabled-bg-color-hover: var(--ti-common-color-bg-disabled, #f5f5f5);
  // 向导步骤条禁用节点点击背景色
  --ti-steps-advanced-disabled-bg-color-active: var(--ti-common-color-bg-disabled, #f5f5f5);

  // 竖式步骤条节点左右字号
  --ti-steps-timeline-name-font-size: var(--ti-common-font-size-1, 14px);
  // 竖式步骤条节点左侧时间预留宽度
  --ti-steps-timeline-vertical-time-width: var(--ti-common-size-25x, 100px);
  // 竖式步骤条线条上下间距
  --ti-steps-timeline-line-margin-vertical: var(--ti-common-size-base, 4px);
  // 竖式步骤条线条背景色
  --ti-steps-timeline-vertical-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
  // 竖式步骤条线条左间距
  --ti-steps-timeline-vertical-line-margin-left: var(--ti-common-size-3x, 12px);
  // 竖式步骤条线条右间距
  --ti-steps-timeline-vertical-line-margin-right: var(--ti-steps-timeline-vertical-line-margin-left);
  // 竖式步骤条圆点与内容间隔
  --ti-steps-timeline-shape-dot-content-margin-left: var(--ti-common-size-3x, 12px);
  // 竖式步骤条圆点尺寸
  --ti-steps-timeline-dot-width: var(--ti-common-size-2x, 8px);
  // 竖式步骤条圆点边框色
  --ti-steps-timeline-dot-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
  // 竖式步骤条圆点背景色
  --ti-steps-timeline-dot-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
  // 竖式步骤条节点内容底部内边距
  --ti-steps-timeline-item-padding-bottom: var(--ti-common-size-5x, 20px);
  // 竖式步骤条二级文本颜色
  --ti-steps-timeline-item-secondary-text-color: var(--ti-common-color-text-weaken, #8a8e99);
  // 竖式步骤条二级文本字号
  --ti-steps-timeline-item-secondary-text-font-size: var(--ti-common-font-size-base, 12px);
  // 竖式步骤条标题与二级文本间距
  --ti-steps-timeline-item-title-margin-bottom: var(--ti-common-size-base, 4px);
  // 基本状态圆点颜色
  --ti-steps-timeline-dot-primary-bg-color: var(--ti-steps-timeline-dot-bg-color);
  // 成功状态圆点颜色
  --ti-steps-timeline-dot-success-bg-color: var(--ti-common-color-success, #50d4ab);
  // 警告状态圆点颜色
  --ti-steps-timeline-dot-warning-bg-color: var(--ti-common-color-warn, #fa9841);
  // 危险状态圆点颜色
  --ti-steps-timeline-dot-danger-bg-color: var(--ti-common-color-error, #f66f6a);
  // 信息状态圆点颜色
  --ti-steps-timeline-dot-info-bg-color: var(--ti-common-color-prompt, #5e7ce0);

  // 时间信息字体色
  --ti-steps-time-text-color: var(--ti-common-color-text-weaken, #8a8e99);
  // 时间信息字号
  --ti-steps-time-font-size: var(--ti-common-font-size-base, 12px);
  // 时间信息下边距
  --ti-steps-time-margin-bottom: var(--ti-common-space-6, 6px);
}
